<template>
    <div class="bgf">        
        <mt-navbar class="howLogin" v-model="selected">
            <mt-tab-item class="account" @click='account' id="1">账号登录</mt-tab-item>
            <mt-tab-item class="verification" id="2">验证码登录</mt-tab-item>
        </mt-navbar>
        <div class="content">
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class='onetelphone'>
                        <span>账号</span>
                        <input type="text" placeholder="手机号" v-model="onetelphone">
                    </div>
                    <div class="password">
                        <span>密码</span>
                        <input type="password" placeholder="请输入密码" v-model="password">
                    </div>
                    <div class="login" @click='accountLogin'>登录</div>
                    <div class="forgetPassword" @click='forgetPassword'>忘记密码？</div>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <div>
                        <div class="telphone">
                            <span>+86</span>
                            <input type="text" placeholder="手机号" v-model="telphone">
                        </div>
                        <div class="verify">
                            <input type="text" placeholder="验证码" v-model="verify">
                            <span @click='getVerify' :class="{'canSendCode':canSendCode}">{{verifyBtn}}</span>
                        </div>
                    </div>
                    <div class="login" @click='letLogin'>登录</div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>

</template>
<script>
import { Toast } from 'mint-ui';
import { sendVerifyCode, codeLogin, pwdLogin, getMyListenBooks } from "@/utils/api.js";
export default {
    data() {
        return{
            selected: this.$route.query.tab || '1',
            telphone: '',
            verify: '',
            verifyBtn: '获取验证码',
            canSendCode: true,
            onetelphone: '',
            password: ''
        }
    },
    mounted() {
        // console.log(sessionStorage.getItem('userInfo').uid)
        // if(sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).uid) {
        //     const uid = sessionStorage.getItem('userInfo').uid
        //     this.$router.push({path: '/listenBook',  query: { uid: uid }})
        // }
    },
    methods: {
        account() {
            // console.log(this.selected)
        },
        getVerify() {
            if (this.canSendCode) {
                this.canSendCode = false
                const data = {
                    telephone: this.telphone
                }
                sendVerifyCode({ data }).then((res) => {
                    if (res.data.code !=='0') {
                        Toast(res.data.message)
                        this.canSendCode = true
                    } else {
                        Toast(res.data.message)
                        this.verifyBtn = '(60s)'
                        const timer = setInterval(() => {
                            const count = parseInt(this.verifyBtn.substring(1)) - 1
                            this.verifyBtn = '（' + count + 's）'
                            if(count <= 0) {
                                clearInterval(timer)
                                this.verifyBtn = '重新发送'
                                this.canSendCode = true
                            }
                        }, 1000)
                    }
                })
            }
        },
        letLogin() {
            const data = {
                phone: this.telphone,
                verificationCode: this.verify
            }
            codeLogin({data}).then((res) => {
                if(res.data.code == '0') {
                    Toast(res.data.message)
                    const uid = res.data.result.id
                     const userInfo = {
                        phone: this.telphone,
                        uid: uid
                    }
                    const userInfoStr = JSON.stringify(userInfo)
                    sessionStorage.setItem('userInfo', userInfoStr);
                    const data = {
                        uid: uid
                    }
                    getMyListenBooks({data}).then((res) => {
                        if(res.data.code == 0) {
                            if(res.data.result.borrowUserVo.type == 1) {
                                if(this.$router.currentRoute.query.from && this.$router.currentRoute.query.from == 'detail') {
                                    const id = this.$router.currentRoute.query.id
                                    this.$router.push({path: '/bookDetail',  query: { uid: uid, id:id }})
                                }  else {
                                    this.$router.push({path: '/listenBook',  query: { uid: uid }})
                                }
                            } else {
                                if(this.$router.currentRoute.query.from && this.$router.currentRoute.query.from == 'gotoopen') {
                                    this.$router.push({path: 'confirOrder', query: {uid: uid}})
                                } else if(this.$router.currentRoute.query.from && this.$router.currentRoute.query.from == 'detail') {
                                    const id = this.$router.currentRoute.query.id
                                    this.$router.push({path: '/bookDetail',  query: { uid: uid, id:id }})
                                }  else {
                                    this.$router.push({path: '/listenBook',  query: { uid: uid }})
                                }
                            }
                        }
                    })
                } else if(res.data.code === '-10'){
                    Toast(res.data.message)
                    const telephone = this.telphone
                    const verify = this.verify
                    this.$router.push({path: '/register',  query: { telephone: telephone, verify: verify }})
                } else {
                    Toast(res.data.message)
                }
            })
        },
        accountLogin() {
            const data = {
                telephone: this.onetelphone,
                password: this.password
            }
            pwdLogin({data}).then((res) => {
                if(res.data.code == '0') {
                    Toast(res.data.message)
                    const uid = res.data.result.id
                    const userInfo = {
                        phone: this.onetelphone,
                        uid: uid
                    }
                    const userInfoStr = JSON.stringify(userInfo)
                    sessionStorage.setItem('userInfo', userInfoStr);
                    const data = {
                        uid: uid
                    }
                    getMyListenBooks({data}).then((res) => {
                        if(res.data.code == 0) {
                            if(res.data.result.borrowUserVo.type == 1) {
                                if(this.$router.currentRoute.query.from && this.$router.currentRoute.query.from == 'detail') {
                                    const id = this.$router.currentRoute.query.id
                                    this.$router.push({path: '/bookDetail',  query: { uid: uid, id:id }})
                                }  else {
                                    this.$router.push({path: '/listenBook',  query: { uid: uid }})
                                }
                            } else {
                                if(this.$router.currentRoute.query.from && this.$router.currentRoute.query.from == 'gotoopen') {
                                    this.$router.push({path: 'confirOrder', query: {uid: uid}})
                                } else if(this.$router.currentRoute.query.from && this.$router.currentRoute.query.from == 'detail') {
                                    const id = this.$router.currentRoute.query.id
                                    this.$router.push({path: '/bookDetail',  query: { uid: uid, id:id }})
                                }  else {
                                    this.$router.push({path: '/listenBook',  query: { uid: uid }})
                                }
                            }
                        }
                    })
                } else {
                    Toast(res.data.message)
                }
            })
        },
        forgetPassword() {
            this.$router.push({path: '/forgotPassword'})
        }
    },
    watch: {
        selected(val) {
            // console.log(val)
        }
    }
    
}
</script>
<style lang="scss" scoped>
.bgf{
    background: #fff;
    height: 100%;
}
.howLogin{
    height: 1rem;
    display: flex;
    flex-direction: row;
    background: #efefef;
    /deep/ .mint-tab-item-label {
        font-size: .3rem;
        color: #0a0a0a;
        font-family: PingFang-SC-Medium;
    }
    /deep/ .is-selected .mint-tab-item-label{
        color: #e71f19;
    }
}

.account{
    flex:1;
    font-family: PingFang-SC-Medium;
    text-align: center;
    font-size: 0.28rem;
    line-height: 1rem;
}
.onetelphone,.password{
    font-family: PingFang-SC-Medium;
    height: 0.5rem;
    padding: 0.2rem .3rem;
    font-size: 0.26rem;
    display: flex;
    border-bottom: 0.01rem solid #ccc;
    span{
        display: block;
        width: 0.9rem;
        font-size: .28rem;
        height: 0.6rem;
        color: #282828;
        line-height: 0.6rem;
        float: left;
    }
    input{
        outline: none;
        border: 0;
        float: left;
        margin-left: 0.4rem;
        font-size: 0.28rem;
        height: 0.6rem;
        width:5.5rem;
        line-height: 0.6rem;
    }
    input::-webkit-input-placeholder {
        text-align: right;
    }
}
.verification{
    flex: 1;
    font-family: PingFang-SC-Medium;
    text-align: center;
    font-size: 0.28rem;
    line-height: 1rem;
}
.telphone{
    height: 0.5rem;
    padding: 0.2rem .3rem;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    border-bottom: 0.01rem solid #ccc;
    span{
        display: block;
        width: 0.92rem;
        height: 0.6rem;
        line-height: 0.6rem;
        float: left;
        border-right: 0.01rem solid #ccc;
    }
    input{
        outline: none;
        border: 0;
        float: left;
        margin-left: 0.4rem;
        font-size: 0.28rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
}
.verify{
    height: 0.5rem;
    padding: 0.2rem .3rem;
    font-family: PingFang-SC-Medium;
    border-bottom: 0.01rem solid #ccc;
    input{
        outline: none;
        border: 0;
        width: 4rem;
        float: left;
        font-size: 0.28rem;
        height: 0.6rem;
        line-height: 0.6rem;
    }
    span{
        display: block;
        width: 2rem;
        height: .56rem;
        line-height: .56rem;
        font-size: .26rem;
        font-family: PingFang-SC-Regular;
        text-align: center;
        float: right;
        background: #ccc;
        color: #fff;
        border-radius: 0.26rem;
    }
    .canSendCode{
        background: #e71f19;
    }
}
.forgetPassword{
    float: right;
    font-family: PingFang-SC-Medium;
    margin-top: 0.5rem;
    color: #e61f18;
}
.login{
    width: 5rem;
    height: 0.81rem;
    margin: 0.8rem auto 0;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.8rem;
    background: #e71f19;
    color:#fff;
    border-radius: 0.4rem;
    font-family: PingFang-SC-Bold;
}
</style>

